<template>
  <div>{{ name }}</div>
  <div v-bind:class="name">
    姓名： <input v-bind:value="name" @input="onInputChange" type="text" />
  </div>
  <a v-bind:href="defaultUrl">点击我</a>
  <button @click="changeUrl">点击改变url</button>
  <div>
    v-bind 的 简单写法

    <a :href="defaultUrl"> 点击我2</a>
  </div>
  <div>
    简单的方法，实现双向绑定：

    <div>{{ name }}</div>
    <input type="text" v-model="name" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "小明",
      defaultUrl: "https://baidu.com",
    };
  },
  methods: {
    changeUrl() {
      this.defaultUrl = "https://qq.com";
    },
    onInputChange(e) {
      console.log(e.target.value);
      this.name = e.target.value;
    },
  },
};
</script>
